<template>
	<el-dialog :title="flag==1? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" @close="onClose" >
		<div class="dialogDiv" style="height: 500px;overflow: auto;">
			<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px" size="small">
				<el-form-item label="角色名称" prop="roleName">
					<el-input v-model="dataForm.roleName" placeholder="角色名称" style="width: 90%;"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="dataForm.remark" placeholder="备注" style="width: 90%;"></el-input>
				</el-form-item>
				<el-form-item size="mini" prop="permission" label="授权">
					<el-tree style="width: 90%;" :data="menuList" :props="menuListTreeProps" node-key="menuId" ref="menuListTree" :default-expand-all="true"
					 show-checkbox>
					</el-tree>
				</el-form-item>
				<el-form-item label="状态" v-if="flag==2">
					<el-radio-group v-model="dataForm.status" style="width: 90%;">
						<el-radio :label="0">不可用</el-radio>
						<el-radio :label="1">可用</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="visible = false" size="small">取消</el-button>
			<el-button type="primary" @click="dataFormSubmit()" size="small">确定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import {
		getMenuList
	} from '@/api/system/menu/menu.js'
	import {
		addRole,
		getRoleInfo,
		updateRole
	} from '@/api/system/role/role.js'
	export default {
		created: function() {

		},
		mounted: function() {

		},
		data() {
			return {
				visible: false,
				dataForm: {},
				menuList: [],
				flag: '',
				menuListTreeProps: {
					id: 'menuId',
					label: 'menuName',
					children: 'child'
				},
				treekey: -100,
				dataRule: {
					roleName: [{
						'required': true,
						message: '请输入角色名称',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			init(id, flag) {
				this.visible = true
				this.flag = flag
				//alert(flag)
				this.getMenuDate()
				if (flag == 1) {

				} else {
					getRoleInfo(id).then(data => {
						//console.log(data.data)
						this.dataForm = data.data
						var index = data.data.permissions.indexOf(this.treekey)
						if (index != -1) {
							var newTree = data.data.permissions.substring(0, index - 1)
							this.$refs.menuListTree.setCheckedKeys(newTree.split(','))
						} else {
							this.$refs.menuListTree.setCheckedKeys(data.data.permissions.split(','))
						}
					})
				}
			},
			onClose() {
				this.dataForm={}
				this.$refs.menuListTree.setCheckedKeys([])
			},
			getMenuDate() {
				getMenuList(null, 1, null, null).then(data => {
					if (data.code == '0000') {
						this.menuList = data.data
					} else {
						this.$message.error(data.msg)
					}
				})
			},
			dataFormSubmit() {
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						if (this.flag == 1) {
							addRole(this.dataForm.roleName, this.dataForm.remark,
								[].concat(this.$refs.menuListTree.getCheckedKeys(), [this.treekey], this.$refs.menuListTree.getHalfCheckedKeys())
								.join(',')).then(data => {
								if (data.code == '0000') {
									this.$message.success(data.msg)
									this.visible = false
									this.$emit('refreshDataList')
								} else {
									this.$message.error(data.msg)
								}
							})
						} else {
							updateRole(this.dataForm.roleId,this.dataForm.roleName, this.dataForm.remark,
							[].concat(this.$refs.menuListTree.getCheckedKeys(), [this.treekey], this.$refs.menuListTree.getHalfCheckedKeys())
							.join(','),this.dataForm.status).then(data=>{
								if(data.code=='0000'){
									this.$message.success(data.msg)
									this.visible = false
									this.$emit('refreshDataList')
								}else{
									this.$message.error(data.msg)
								}
							})
						}
						//console.log(this.dataForm)
						//alert([].concat(this.$refs.menuListTree.getCheckedKeys(),this.$refs.menuListTree.getHalfCheckedKeys()))
					}
				})
			}
		}
	}
</script>

<style>
.dialogDiv::-webkit-scrollbar {/*滚动条整体样式*/
	width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
	height: 1px;
}
.dialogDiv::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
	border-radius: 10px;
	 -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	background: #535353;
}
.dialogDiv::-webkit-scrollbar-track {/*滚动条里面轨道*/
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	border-radius: 10px;
	background: #EDEDED;
}
</style>
